<template>
	<view>
		<!-- 导航栏 -->
		 <uni-nav-bar left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回" rightText="新建"  title="工程部管理"  @clickLeft="back" @clickRight="addBtn" :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	
	<!-- 筛选功能 -->
	<view style="position: fixed;z-index: 100;width:100%;">
	    <uni-row class="demo-uni-row">
	        <uni-col :span="11">
	            <view class="title">总共{{total}}条数据</view>
	        </uni-col>
	        <uni-col :span="2">
	         <view class="title" style="color:#c3c3c3">|</view>
	        </uni-col>
	        <uni-col :span="11">
	            <view class="title" @click="show=true">筛选</view>
	        </uni-col>
	    </uni-row>
	</view>
	<view style="width:100%;height: 88rpx;display: block"></view>
	
	            <!-- 搜索栏 -->
				<u-swipe-action :autoClose="true">
					<view class="list" v-for="(item,index) in list" :key="item.id" >
						<u-swipe-action-item :options="options1" :disabled="disabledShow" @click="delFn(item.id)" >
							<view style="padding: 10px;" @click="detauilsBtn(item)">
								
								<view class="desc" style="color: #11de63 ;font-size: 15px;">单号：{{item.serialNum}}</view>
								<view class="desc" style="color: #70e539 ;">订单编号：{{item.orderNo}}</view>
								<view class="desc">业务员名称：{{item.salesmanName}}</view>
								<view class="desc">项目名称：{{item.projectName}}</view>
								<view class="desc">项目地址：{{item.projectAddress}}</view>
								<view class="desc">工程部人员:{{item.userName}}</view>
								<view class="desc">出差天数:{{item.days}}</view>
								<view class="desc">费用:{{item.costs}}</view>
							</view>
	                    </u-swipe-action-item>
				   </view>
			   </u-swipe-action>
			   <!-- 筛选框 -->
				<u-popup :show="show" @close="show=false"  mode="right" :closeOnClickOverlay="true" overlayStyle="margin-top:44px;" customStyle="margin-top:44px;">
					<view class="popup">
									 <view>
										 <u-cell>
											 <template #title>
												 <view>订单编号</view>
											 </template>
										 </u-cell>
										 <view style="padding: 10px;border-bottom: solid 1px #c3c3c3;" >
											   <u--input   placeholder="请输入内容"    v-model="formData.orderNo"></u--input>
										 </view>
									 </view>
									 <view>
										 <u-cell>
											 <template #title>
												 <view>项目名称</view>
											 </template>
										 </u-cell>
										 <view style="padding: 10px;border-bottom: solid 1px #c3c3c3;" >
											   <u--input   placeholder="请输入内容"    v-model="formData.projectName"></u--input>
										 </view>
									 </view>
									 <view>
											 <u-cell>
												 <template #title>
													 <view>工程人员</view>
												 </template>
											 </u-cell>
											 <view style="padding: 10px;border-bottom: solid 1px #c3c3c3;" >
												   <u--input   placeholder="请输入内容"    v-model="formData.userName"></u--input>
											 </view>
									 </view>
									
									 <!-- button -->
									 <view class="button">
										 <view class="btn" style="border-right: solid 1px #c3c3c3;" @click="resetBtn">重置</view>
										 <view class="btn" @click="btnOk">确认</view>
									 </view>
								
					</view>
				</u-popup>
	
	<!-- 消息提示 -->
	<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {listCost,delCost} from '@/api/enginee.js'
	export default {
		data() {
			return {
				formData:{
					       pageNum: 1,
					        pageSize: 10,
					        orderId: null,
					        orderNo: null,
					        salesman: null,
					        salesmanName: null,
					        projectName: null,
					        projectAddress: null,
					        userId: null,
					        userName: null,
					        userPhoto: null,
					        days: null,
					        costs: null,
					
				},
				list:[],
				total:'',
				show:false,
				options1:[{text:'删除'}],
				disabledShow:false,
			}
		},
		onLoad() {
			this.initData()
		},
		onReachBottom(){
			// // 上划加载
			// if(this.list.length==this.total){
			// 	this.formData.pageNum=1
			// 	return false
			// }
			// this.formData.pageNum++
			// listFollow(this.formData).then(response=>{
			// 	this.list.push(...response.rows)
			// })
			if(this.formData.pageSize*this.formData.pageNum<this.total){
				 this.formData.pageNum++
				 let res=listCost(this.formData).then(reponse=>{
							 this.list.push(...reponse.rows)
							  console.log(this.list);
				 })
							
			}else{
				 this.$refs.uToast.show({
					 type:'warning',
					 message:'我是有底线的',
					 
				 })
			}
			
		},
		onPullDownRefresh(){
			// // 下拉加载
			// this.loading=true
			this.formData={
					pageSize:10,
					pageNum:1,
				},
			this.list=[]
			setTimeout(()=>{
				this.initData()
				uni.stopPullDownRefresh()
			},500)
		},
		methods: {
			async initData(){
				let res=await listCost()
				this.list=res.rows
				this.total=res.total
			}, 
			
			addBtn(){
				uni.redirectTo({
					url:'/pages/ebgineeCost/addenginee/addenginee'
				}) 
			},
			// 删除
			delFn(id){
				delCost(id).then(response=>{
					console.log(response);
					if(response.code==200){
						this.$refs.uToast.show({
							type:'success',
							message:'删除成功!'
						})
					}
					this.initData()
				})
			},
			// 点击计入详情页
			detauilsBtn(item){
				uni.navigateTo({
					url:'/pages/ebgineeCost/engineedatial/engineedatial?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			// 返回首页
			back() {
					uni.switchTab({
						url:'/pages/index'
					})
				},
			btnOk(){
				this.initData()
				this.formData={
					pageNum: 1,
					 pageSize: 10,
					 orderId: null,
					 orderNo: null,
					 salesman: null,
					 salesmanName: null,
					 projectName: null,
					 projectAddress: null,
					 userId: null,
					 userName: null,
					 userPhoto: null,
					 days: null,
					 costs: null,
				}
				this.show=false
			},
			resetBtn(){
				this.formData={
					pageNum: 1,
					 pageSize: 10,
					 orderId: null,
					 orderNo: null,
					 salesman: null,
					 salesmanName: null,
					 projectName: null,
					 projectAddress: null,
					 userId: null,
					 userName: null,
					 userPhoto: null,
					 days: null,
					 costs: null,
				}
			},
		}
	}
</script>

<style lang="scss">
	// 下拉选择框
	.demo-uni-row {
	    margin-bottom: 10px;
	    // position: fixed;
	    /* QQ、字节小程序文档写有 :host，但实测不生效 */
	    /* 百度小程序没有 :host，需要设置block */
	    /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
	    display: block;
	    /* #endif */
	
	    .title {
	        height: 48px;
	        line-height: 48px;
	        background-color: #ffffff;
	        text-align: center;
	        font-size: 16px;
	    }
	}
	
.list{
		background-color: #fff;
		border: solid 1px #c3c3c3;
		margin: 5px;
		.desc{
			font-size: 12px;
			margin-top: 3px;
			.bgc{
				width: 30px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				display: inline-block;
				color: #fff;
				background-color: #fd9540;
			}
		}
	}
	// 晒选的按钮
	.popup{
		height: 100%;
		width: 100%;
		position: relative;
		.button{
			position: absolute;
			bottom: 0;
			display: flex;
			width: 100%;
			justify-content: space-around;
			border-top: solid 1px #c3c3c3;
			.btn{
				width: 50%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				
			}
		}
	}
</style>
